<template>
  <el-form ref="formRef" label-position="top" :model="props.formValue">
    <!-- <MerakColapse :is-active="true">
      <template #header>{{ $t("goods_attribute.property_clearance") }}</template> -->
      <el-row :gutter="40">
        <el-col :span="span">
          <el-form-item prop="cc_prop_id" :label="$t('goods_attribute.cc_prop_id')">
            <el-input
              class="qf_input"
              v-model="modelValue.cc_prop_id.value"
              @input="value => handlePrefixTrim('cc_prop_id', value)"
              @change="value => handleTrim('cc_prop_id', value)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="cc_property_cn" :label="$t('goods_attribute.cc_property_cn')">
            <el-input
              class="qf_input"
              v-model="modelValue.cc_property_cn.value"
              @input="value => handlePrefixTrim('cc_property_cn', value)"
              @change="value => handleTrim('cc_property_cn', value)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="cc_property" :label="$t('goods_attribute.cc_property')">
            <el-input
              class="qf_input"
              v-model="modelValue.cc_property.value"
              @input="value => handlePrefixTrim('cc_property', value)"
              @change="value => handleTrim('cc_property', value)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="cc_property_en" :label="$t('goods_attribute.cc_property_en')">
            <el-input
              class="qf_input"
              v-model="modelValue.cc_property_en.value"
              @input="value => handlePrefixTrim('cc_property_en', value)"
              @change="value => handleTrim('cc_property_en', value)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="cc_prop_type" :label="$t('goods_attribute.cc_prop_type')">
            <el-select class="qf_select" v-model="modelValue.cc_prop_type.value">
              <el-option v-for="option in modelValue.cc_prop_type.options" :value="option.value" :label="option.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="sort" :label="$t('goods_attribute.sort')">
            <el-input class="qf_input" v-number v-model="modelValue.sort.value" />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="cc_prop_group" :label="$t('goods_attribute.cc_prop_group')">
            <el-select class="qf_select" v-model="modelValue.cc_prop_group.value">
              <el-option v-for="option in modelValue.cc_prop_group.options" :value="option.value" :label="option.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="cc_prop_group_sort" :label="$t('goods_attribute.cc_prop_group_sort')">
            <el-input class="qf_input" v-number v-model="modelValue.cc_prop_group_sort.value" />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="cc_is_required" :label="$t('goods_attribute.cc_is_required')">
            <el-radio-group v-model="modelValue.cc_is_required.value">
              <el-radio v-for="option in modelValue.cc_is_required.options" :value="option.value" :label="option.label" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="props.type !== RouteType.industrial" :span="span">
          <el-form-item prop="is_spec" :label="$t('goods_attribute.is_spec')">
            <el-radio-group v-model="modelValue.is_spec.value">
              <el-radio v-for="option in modelValue.is_spec.options" :value="option.value" :label="option.label" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="un_editable_checked" :label="$t('goods_attribute.un_editable_checked')">
            <el-radio-group v-model="modelValue.un_editable_checked.value">
              <el-radio v-for="option in modelValue.un_editable_checked.options" :value="option.value" :label="option.label" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    <!-- </MerakColapse> -->
  </el-form>
</template>

<script setup lang="ts">
import type { SearchDataType } from "../searchData";

import { ref, computed } from "vue";

import { useGlobalStore } from "@/stores/modules/global";

import { FormInstance, ElRow, ElCol, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio } from "element-plus";

import MerakColapse from "@/components/merakColapse/index.vue";

import { RouteType } from "@/api/modules/goodsArchive/allocation";

const props = defineProps<{
  type: RouteType;
  formValue: Record<string, any>;
}>();

const modelValue = defineModel<Record<string, SearchDataType>>({ required: true });

const globalStore = useGlobalStore();

const formRef = ref<FormInstance>();

const span = computed(() => (globalStore.language === "zh" ? 6 : 8));

// 处理输入框开头空格
const handlePrefixTrim = (key: string, value: string) => {
  modelValue.value[key].value = value.replace(/^\s+/g, "");
};

// 处理输入框尾部空格
const handleTrim = (key: string, value: string) => {
  modelValue.value[key].value = value.trim();
};

defineExpose({
  reset: () => {
    Object.values(modelValue.value).forEach(item => {
      item.value = undefined;
    });
    const timer = requestAnimationFrame(() => {
      formRef.value?.clearValidate();
      cancelAnimationFrame(timer);
    });
  },
  valid: () => formRef.value?.validate()
});
</script>
